Skip to content

SDKS-2669: Add LinkedIn and Microsoft Entra as IDP Providers#539

Open
SteinGabriel wants to merge 1 commit into
mainfrom
SDKS-2669
Open

SDKS-2669: Add LinkedIn and Microsoft Entra as IDP Providers#539
SteinGabriel wants to merge 1 commit into
mainfrom
SDKS-2669

Conversation

@SteinGabriel

Copy link
Copy Markdown
Contributor

Summary

https://pingidentity.atlassian.net/browse/SDKS-2669

Adds LinkedIn and Microsoft Entra ID as out-of-the-box identity providers in the SelectIdP callback.
Previously the widget only rendered branded buttons for Apple, Facebook, and Google; any other provider fell into a no-render branch. LinkedIn and Microsoft now render branded buttons with brand colors, official logos, and dark mode variants.

Changes

core/components/icons

  • linkedin-icon.svelte — new LinkedIn "in" logo SVG; accepts classes/size props matching the existing icon interface.
  • microsoft-icon.svelte — new 4-color Microsoft squares logo SVG (official sign-in guideline, not the Entra shield); same props interface.

core/journey/callbacks/select-idp

  • select-idp.svelte — added {:else if} branches matching idp.text.toUpperCase().includes('LINKEDIN') and 'MICROSOFT', rendering branded buttons with LinkedinIcon/MicrosoftIcon and the new theme classes.
    No {:else} fallback added — unknown providers still render nothing.
  • select-idp.mock.ts — added linkedin-web and microsoft-web entries to all multi-provider step fixtures; added singleLinkedInProviderStep and singleMicrosoftProviderStep. Bumped copyright year.
  • select-idp.stories.js — added LinkedIn and Microsoft Storybook story variants backed by the single-provider fixtures.

themes/default

  • journey.cjs — added .button-linkedin (#0077b5), .button-linkedin_dark, .button-microsoft (#0072c6), and .button-microsoft_dark. Dark mode variants invert to white background with brand-color text, following the Facebook precedent.

.changeset

  • add-linkedin-microsoft-idp.md — minor changeset for @forgerock/login-widget.

Tests

  • Storybook story variants added for LinkedIn and Microsoft (light + dark visual coverage).
  • Mock fixtures extended so both providers appear in multi-provider and single-provider steps.
  • No component unit tests — vitest has no DOM environment / @testing-library/svelte configured (existing limitation).
  • No E2E — no provisioned AM journeys for LinkedIn/Microsoft; matches the Apple/Facebook precedent (only Google has a live E2E).

How to test

1. Visual check in Storybook

  1. pnpm storybook
  2. Open Callbacks/SelectIdpLinkedIn and Microsoft stories.
  3. Confirm: LinkedIn renders blue #0077b5 button with "in" logo; Microsoft renders blue #0072c6 button with 4-color squares logo.
  4. Toggle dark mode — both invert to white background with brand-color text.

2. Build checks

  1. pnpm build:widget succeeds.
  2. pnpm check:lint passes.
  3. pnpm check:svelte passes.

Verify the fallback path

  1. In a multi-provider step, confirm a provider whose display name matches none of Apple/Facebook/Google/LinkedIn/Microsoft renders nothing (unchanged behavior).

@changeset-bot

changeset-bot Bot commented Jun 24, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 24bb850

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@forgerock/login-widget Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vatsalparikh vatsalparikh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are still waiting on testing both icons live in AIC so this is just a code review.

One minor thing on Microsoft icon, everything else looks good!

Comment thread core/components/icons/microsoft-icon.svelte Outdated

@vatsalparikh vatsalparikh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving code changes based on Storybook tests. Actual integration and e2e / QA is in progress, I believe, but code changes look good!

feat(select-idp): add LinkedIn and Microsoft theme button classes

feat(select-idp): add LinkedIn and Microsoft provider branches

chore(select-idp): add LinkedIn and Microsoft entries to mock fixtures

feat(select-idp): add LinkedIn and Microsoft Storybook stories

test(select-idp): add LinkedIn and Microsoft E2E social redirect tests

chore(release): add changeset for LinkedIn and Microsoft IDP support

test(select-idp): drop LinkedIn/Microsoft E2E pending AM journeys

fix(select-idp): use official Microsoft brand colors for icon

fix(select-idp): align Microsoft button bg/border with brand guidelines
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants